<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>touch事件</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    body {
        width: 100vw;
        height: 100vh;
        background-color: slategrey;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .item-1 {
        width: 100px;
        height: 100px;
        background-color: violet;
    }
</style>
<body>
    <div class="item-1"></div>
    <script>
        const item = document.querySelector('.item-1');
        item.addEventListener('touchstart',(e) => {
            console.log(e)
        })

        /**
         * touchEvent事件详解
        */

        // touches: 位于屏幕上的所有手指的列表一个手指一个列表，两根手指两个列表，三根手指三个列表

        // targetTouchs: 位于该元素上的所有手指的列表一个手指一个列表，两根手指两个列表，三根手指三个列表

        // changedTouchs: touchstart时包含与触摸屏接触的触点，touchEnd时包含离开触摸屏的触点

        // 注: 没有对比出touches与targetTouchs的差别，推荐使用targetTouchs



        /**
         * targetTouchs参数详解
         */

         // clientX | clientY: 获取当前点击元素距离视口左上角的位置(推荐使用)

         // pageX | pageY: 获取内容区域点击元素距离视口左上角的位置 （有滚动条时计算整个内容区域）

         // screenX | screenY: 获取当前点击元素距离浏览器左上角的位置
    </script>
</body>
</html>